<template>
  <div class="vue2leaflet">
    1. 没有divicon
    2. popup不能hover展示
    <l-map
      :options="mapOptions"
    >
     <l-tile-layer :url="backLayerUrl" />
     <l-tile-layer :url="markLayerUrl" />

     <l-marker v-for="latlng in marks" :key="latlng.toString()" :lat-lng="latlng" :icon="icon" >
      <l-popup :options="{closeButton: false, className: 'popup-container-1111'}">
        <div class="popup">
          {{latlng.toString()}}
        </div>

      </l-popup>
    </l-marker>
     
    </l-map>
  </div>
</template>
    
<script>
import { createBackgroundTileLayerUrl, createMarkerIcon, createMarkTileLayerUrl, POS_MARKERS } from '@/utils';
import L from "leaflet";
export default {
  name: "Vue2Leaflet",
  data() {
    const backLayerUrl = createBackgroundTileLayerUrl();
    const markLayerUrl = createMarkTileLayerUrl();
    const icon = createMarkerIcon();
    return {
      mapOptions: {
        zoom: 16,
        crs: L.CRS.EPSG3857,
        attributionControl: false,
        center: [45.763968, 126.591629],
        zoomControl: false,
      },
      backLayerUrl,
      markLayerUrl,
      marks: POS_MARKERS,
      icon,
      popupContent: '',
      popupLatlng: [
        [45.767418, 126.602261],
      ]
    };
  },
  methods: {
  }
};
</script>
    
<style>
.vue2leaflet {
  height: 80vh;
}

.popup {
  width: 100px;
  height: 100px;
}

/* .popup-container-1111 {
  border-radius: 50%;
  background: green;
}

.popup-container-1111 .leaflet-popup-content-wrapper, .leaflet-popup-content {
  padding: 0;
  margin: 0;
}

.popup-container-1111 .leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: blue;
} */
</style>
    